<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-14 11:15:28
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2022-10-26 09:37:59
 * @FilePath: \robot\src\views\patroling\PatrolingSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-container class="h-full">
    <el-aside id="aside" class="w-32 bg-[#1f3947] pt-4">
      <div
        v-for="item in tabList"
        :key="item.title"
        class="text-center py-4 text-[#8f8f8f] cursor-pointer"
        :class="{ highLight: isHighLight(item) }"
        @click="changeTab(item)"
      >
        {{ item.title }}
      </div>
    </el-aside>
    <el-main class="bg-[#072232]">
      <!-- 新增按钮 -->
      <div
        v-if="curTab === tabMap.DEVICE || curTab === tabMap.CONFIG"
        class="w-28 bg-gradient-to-b from-[#FF931E] to-[#503417] text-white text-center py-3 rounded mb-4 cursor-pointer"
        @click="openSetting('add')"
      >
        {{ addBtnTitle }}
      </div>
      <!-- 列表数据 -->
      <PatrolingList :list="list" :columns="columns">
        <template
          v-if="curTab === tabMap.CAR || curTab === tabMap.DEVICE"
          #status="{ row }"
        >
          <span v-if="row.status" class="text-white">启用</span>
          <span v-else class="text-[#F83C20]">未启用</span>
        </template>
        <template
          v-if="curTab === tabMap.DEVICE || curTab === tabMap.CONFIG"
          #action="{ row }"
        >
          <span
            class="cursor-pointer text-[#ecc59e] mr-4"
            @click="openSetting('edit', row)"
            >修改</span
          >
          <span class="cursor-pointer text-[#ecc59e]" @click="handleDel(row)"
            >删除</span
          >
        </template>
        <template #hole="{ row }">
          <span class="text-white">{{ row.hole === "1" ? "有" : "无" }}</span>
        </template>
        <template #person="{ row }">
          <span class="text-white">{{ row.person === "1" ? "有" : "无" }}</span>
        </template>
        <template #notice="{ row }">
          <span class="text-white">{{ noticeMap[row.notice] }}</span>
        </template>
        <template #picPath="{ row }">
          <span
            class="cursor-pointer text-[#ecc59e]"
            @click="handleShow(row.picPath)"
            >查看</span
          >
        </template>
      </PatrolingList>
      <!-- 编辑弹窗 -->
      <PatrolingSettingDialog
        v-if="curTab === tabMap.DEVICE || curTab === tabMap.CONFIG"
        v-model:visible="dialogVisible"
        :title="dialogTitle"
        :form-options="formOptions"
        :form-data="formData"
        @confirm="handleConfirm"
      ></PatrolingSettingDialog>
      <!-- 图片弹窗 -->
      <el-dialog v-model="picVisible">
        <img class="w-full" :src="picPath" />
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script setup>
import PatrolingList from "./PatrolingList.vue";
import useCarLink from "./composables/useCarLink.js";
import useCameraLink from "./composables/useCameraLink.js";
import useDevice from "./composables/useDevice.js";
// import useConfig from "./composables/useConfig";
import { ref, computed } from "vue";
import PatrolingSettingDialog from "./PatrolingSettingDialog.vue";
import usePatrolingStore from "@/store/patroling";
import { storeToRefs } from "pinia";
import useEnviroment from "./composables/useEnviroment.js";

const { patrolingInfo } = storeToRefs(usePatrolingStore());
const caritem = computed(() => {
  return patrolingInfo.value.robotid;
});

const tabMap = {
  CAR: "车辆连接",
  CAMERA: "视频连接",
  DEVICE: "设备设置",
  // CONFIG: "参数设置",
  ENVIROMENT: "环境检测",
};

// 通知状态
const noticeMap = {
  P: "未通知",
  D: "已通知",
  I: "忽略通知",
};

// 左侧菜单
const tabList = [
  {
    title: tabMap.CAR,
  },
  {
    title: tabMap.CAMERA,
  },
  {
    title: tabMap.DEVICE,
  },
  // {
  //   title: tabMap.CONFIG,
  // },
  {
    title: tabMap.ENVIROMENT,
  },
];

const curTab = ref(tabMap.CAR);
/**
 * @description: 切换菜单
 * @return {*}
 */
function changeTab(item) {
  curTab.value = item.title;
}

/**
 * @description: 是否高亮
 * @param {*} item
 * @return {*}
 */
function isHighLight(item) {
  return curTab.value === item.title;
}

// 车辆连接相关
const { columns1, list1, getCarLink } = useCarLink(caritem);
// 视频连接相关
const { columns2, list2 } = useCameraLink(caritem);
// 设备设置相关
const {
  openDeviceSetting,
  deviceSettingVisible,
  deviceFormOptions,
  deviceFormData,
  delDevice,
  handleDevice,
} = useDevice(caritem, getCarLink);

// 参数设置相关
// const {
//   columns4,
//   list4,
//   configFormOptions,
//   configSettingVisible,
//   openConfigSetting,
//   handleConfig,
//   delConfig,
//   configFormData,
// } = useConfig();

// 环境检测相关
const { columns5, list5 } = useEnviroment();

const list = computed(() => {
  switch (curTab.value) {
    case tabMap.CAR:
      return list1.value;
    case tabMap.CAMERA:
      return list2.value;
    case tabMap.DEVICE:
      return list1.value;
    // case tabMap.CONFIG:
    //   return list4.value;
    case tabMap.ENVIROMENT:
      return list5.value;
    default:
      return [];
  }
});

const columns = computed(() => {
  switch (curTab.value) {
    case tabMap.CAR:
      return columns1.slice(0, -1);
    case tabMap.CAMERA:
      return columns2;
    case tabMap.DEVICE:
      return columns1;
    // case tabMap.CONFIG:
    //   return columns4;
    case tabMap.ENVIROMENT:
      return columns5;
    default:
      return [];
  }
});

const dialogVisible = computed({
  get() {
    switch (curTab.value) {
      case tabMap.DEVICE:
        return deviceSettingVisible.value;
      // case tabMap.CONFIG:
      //   return configSettingVisible.value;
      default:
        return false;
    }
  },
  set(value) {
    switch (curTab.value) {
      case tabMap.DEVICE:
        deviceSettingVisible.value = value;
        break;
      // case tabMap.CONFIG:
      //   configSettingVisible.value = value;
      //   break;
      default:
        break;
    }
  },
});

const dialogTitle = computed(() => {
  switch (curTab.value) {
    case tabMap.DEVICE:
      return "外设信息";
    case tabMap.CONFIG:
      return "参数配置";
    default:
      return "";
  }
});

const formOptions = computed(() => {
  switch (curTab.value) {
    case tabMap.DEVICE:
      return deviceFormOptions.value;
    // case tabMap.CONFIG:
    //   return configFormOptions.value;
    default:
      return [];
  }
});

const formData = computed(() => {
  switch (curTab.value) {
    case tabMap.DEVICE:
      return deviceFormData.value;
    // case tabMap.CONFIG:
    //   return configFormData.value;
    default:
      return [];
  }
});

function handleConfirm(formData) {
  switch (curTab.value) {
    case tabMap.DEVICE:
      handleDevice(formData);
      break;
    // case tabMap.CONFIG:
    //   handleConfig(formData);
    //   break;
    default:
      break;
  }
}

function openSetting(type, row = {}) {
  switch (curTab.value) {
    case tabMap.DEVICE:
      openDeviceSetting(type, row);
      break;
    // case tabMap.CONFIG:
    //   openConfigSetting(type, row);
    //   break;
    default:
      break;
  }
}
function handleDel(row) {
  switch (curTab.value) {
    case tabMap.DEVICE:
      delDevice(row.id);
      break;
    // case tabMap.CONFIG:
    //   delConfig(row.id);
    //   break;
    default:
      break;
  }
}

const addBtnTitle = computed(() => {
  switch (curTab.value) {
    case tabMap.DEVICE:
      return "添加外设";
    case tabMap.CONFIG:
      return "添加参数";
    default:
      return "";
  }
});

const picVisible = ref(false);
const picPath = ref(null);
/**
 * @description: 查看图片
 * @return {*}
 */
function handleShow(path) {
  picPath.value = path;
  picVisible.value = true;
}
</script>

<style lang="scss" scoped>
.highLight {
  color: #fff;
  background-image: linear-gradient(to bottom, #ff931e, #503417);
}
#aside {
  background-image: linear-gradient(to bottom, #0d517b, #0c2d46 2%);
}
</style>
